<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>user 单元格编辑 </title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script src="scripts/boot.js" type="text/javascript"></script> 
    <script src="scripts/miniui/locale/en_US.js" type="text/javascript"></script>
</head>
<body>
	<style type="text/css">
	html, body {
		margin: 0;
		padding: 0;
		border: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	</style>
	<h1 style="text-align: center">user 单元格编辑</h1>
    <div class="mini-toolbar" style="border-bottom:0;padding:0px;">
        <table style="width:100%;">
            <tr>
                <td style="width:100%;">
                    <a class="mini-button" iconCls="icon-add" onclick="addRow()" plain="true" tooltip="增加...">增加</a>
                    <a class="mini-button" iconCls="icon-remove" onclick="removeRow()" plain="true">删除</a>
                    <span class="separator"></span>
                    <a class="mini-button" iconCls="icon-save" onclick="saveData()" plain="true">保存</a>            
                </td>
                <td style="white-space:nowrap;">
                    <input id="key" class="mini-textbox" emptyText="请输入姓名" style="width:150px;" onenter="onKeyEnter"/>   
                    <a class="mini-button" onclick="search()">查询</a>
                </td>
            </tr>
        </table>           
    </div>
    <div class="mini-fit" >
	    <div id="datagrid1" class="mini-datagrid" style="width:100%;height:100%;" 
	        url="data/data.txt" idField="id" 
	        allowResize="true" pageSize="20" 
	        allowCellEdit="true" allowCellSelect="true" multiSelect="true" 
	        editNextOnEnterKey="true"  editNextRowCell="true"
	        
	    >
	        <div property="columns">
	            <div type="indexcolumn"></div>
	            <div type="checkcolumn"></div>
	            <div name="LoginName"  field="loginname" headerAlign="center" allowSort="true" width="150" >员工帐号
	                <input property="editor" class="mini-textbox" style="width:100%;" minWidth="200" />
	            </div>
	            <div field="age" width="100" allowSort="true" >年龄
	                <input property="editor" class="mini-spinner"  minValue="0" maxValue="200" value="25" style="width:100%;"/>
	            </div>            
	            <div name="birthday" field="birthday" width="100" allowSort="true" dateFormat="yyyy-MM-dd">出生日期
	                <input property="editor" class="mini-datepicker" style="width:100%;"/>
	            </div>    
	            <div field="remarks" width="120" headerAlign="center" allowSort="true">备注
	                <input property="editor" class="mini-textarea" style="width:200px;" minWidth="200" minHeight="50"/>
	            </div>
	            <!--ComboBox：本地数据-->         
	            <div type="comboboxcolumn" autoShowPopup="true" name="gender" field="gender" width="100" allowSort="true"  align="center" headerAlign="center">性别
	                <input property="editor" class="mini-combobox" style="width:100%;" data="Genders" />                
	            </div>
	            <!--ComboBox：远程数据-->
	            <div type="comboboxcolumn" field="country" width="100" headerAlign="center" >国家
	                <input property="editor" class="mini-combobox" style="width:100%;" url="data/countrys.txt" />                
	            </div>   
	            <div type="checkboxcolumn" field="married" trueValue="1" falseValue="0" width="60" headerAlign="center">婚否</div>                        
	        </div>
	    </div>
	</div>
    <script type="text/javascript">
     
        var Genders = [{ id: 1, text: '男' }, { id: 2, text: '女'}];
        
        mini.parse();

        var grid = mini.get("datagrid1");
        grid.load();
        

        //////////////////////////////////////////////////////

        function search() {
            var key = mini.get("key").getValue();

            grid.load({ key: key });
        }

        function onKeyEnter(e) {
            search();
        }

        function addRow() {          
            var newRow = { name: "New Row" };
            grid.addRow(newRow, 0);

            grid.beginEditCell(newRow, "LoginName");
        }
        function removeRow() {
            var rows = grid.getSelecteds();
            if (rows.length > 0) {
                grid.removeRows(rows, true);
            }
        }
        function saveData() {            
            
            var data = grid.getChanges();
            var json = mini.encode(data);
            
            grid.loading("保存中，请稍后......");
           /*  $.ajax({
                url: "../data/AjaxService.aspx?method=SaveEmployees",
                data: { data: json },
                type: "post",
                success: function (text) {
                    grid.reload();
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(jqXHR.responseText);
                }
            }); */
        }


        grid.on("celleditenter", function (e) {
            var index = grid.indexOf(e.record);
            if (index == grid.getData().length - 1) {
                var row = {};
                grid.addRow(row);
            }
        });

        grid.on("beforeload", function (e) {
            if (grid.getChanges().length > 0) {
                if (confirm("有增删改的数据未保存，是否取消本次操作？")) {
                    e.cancel = true;
                }
            }
        });


//        grid.on("cellcommitedit", function (e) {
//            if (e.field == "loginname") {
//                if (e.value == "111") {
//                    alert("不允许为111");
//                    e.cancel = true;
//                }
//            }
//        });

//        grid.on('beforeload', function (e) {
//            if (grid.getChanges().length > 0) {
//                e.cancel = true;
//                alert('有未保存的数据');
//            }
//        });

        
    </script>

    <div class="description">
        <h3>Description</h3>
        <ul>
            <li>方向键导航单元格</li>
            <li>按回车键进入编辑</li>
            <li>按ESC键取消编辑</li>
            <li>按Tab键进入下一个单元格编辑</li>
            <li>editNextOnEnterKey="true"后，按回车键进入下一个单元格编辑</li>
        </ul>
    </div>
</body>
</html>